<template>
  <div>

    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="优惠券名称">
        <el-input v-model="formInline.planName" placeholder="请搜索优惠券名称"></el-input>
      </el-form-item>
      <el-form-item label="优惠券类型">
        <el-select  clearable v-model="formInline.typeId" placeholder="活动区域">
          <el-option
              v-for="b in getTypes"
              :key="b.typeId"
              :label="b.typeName"
              :value="b.typeId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="list">查询</el-button>
        <el-button type="primary" @click="openPlanAdd">添加</el-button>
        <el-button type="warning" size="small"  icon="el-icon-download"  @click="goOut()">导出</el-button>
      </el-form-item>
    </el-form>
    <el-upload
        class="upload-demo"
        action="http://localhost:8000/carservice/carPlan/upload"
        multiple
        :limit="3">
      <el-button size="small" type="primary">导入</el-button>
    </el-upload>
    <template>
      <el-table
          :data="tableData"
          border
          style="width: 100%">
        <el-table-column
            fixed
            prop="planId"
            label="优惠券编号"
            width="50">
        </el-table-column>
        <el-table-column
            prop="planName"
            label="优惠券名称"
            width="100">
        </el-table-column>
        <el-table-column
            prop="img"
            label="优惠券图片"
            width="120">
          <template v-slot="scope">
            <el-image
               style="width: 100px; height: 100px;"
               :src="scope.row.img"
            >
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
            prop="price"
            label="价格"
            width="100">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="优惠券活动开始时间"
            width="100">
        </el-table-column>
        <el-table-column
            prop="endTime"
            label="优惠券结束时间"
            width="100">
        </el-table-column>
        <el-table-column
            prop="created"
            label="日期"
            width="100">
        </el-table-column>
        <el-table-column
            prop="total"
            label="价格"
            width="100">
        </el-table-column>
        <el-table-column
            prop="createBy"
            label="创建者"
            width="100">
        </el-table-column>
        <el-table-column
            prop="updateBy"
            label="修改者"
            width="100">
        </el-table-column>
        <el-table-column
            prop="updateTime"
            label="修改时间"
            width="100">
        </el-table-column>
        <el-table-column
            prop="remark"
            label="优惠券介绍"
            width="100">
        </el-table-column>
        <el-table-column
            prop="bname"
            label="优惠券类型"
            width="100">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="XQ(scope.row.planId)" type="text" size="small">详情</el-button>
            <el-button @click="QiangDan(scope.row.planId)" type="text" size="small">抢单</el-button>
          </template>
        </el-table-column>
      </el-table>



    </template>
    <el-pagination
        @current-change="goPage"
        :page-size="5"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>


    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="clientPlanForm">
        <el-form-item label="优惠卷名称" :label-width="formLabelWidth">
          <el-input v-model="clientPlanForm.planName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="优惠卷图片" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8000/carservice/carPlan/uploadFile"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :src="imageUrl" style="height: 100px;width: 100px" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="优惠卷价格" :label-width="formLabelWidth">
          <el-input v-model="clientPlanForm.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input type="textarea" v-model="clientPlanForm.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveClientPlan">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "ClientPlanView",
  data() {
    return {
      tableData:[],
      pageNum:1,
      total:0,
      imageUrl:'',
      formInline:{},
      clientPlanForm:{},
      getTypes:[],
      dialogFormVisible:false,
      formLabelWidth:'120px',
      title:'录入优惠卷',
    }
  }, methods: {
    QiangDan(planId){
      // alert(planId)
      this.axios.post("http://localhost:8000/carservice/carClientPlan/QiangDan?planId="+planId).then(res=>{
        if(res.data.code==200){
          this.$message.info("抢单成功");
          this.list();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    XQ(planId){
      // alert(planId);
      this.$router.push({path:'xq',query:{planId:planId}})
    },
    saveClientPlan(){
      this.axios.post("http://localhost:8000/carservice/carClientPlan/saveClientPlan",this.clientPlanForm).then(res=>{
        if(res.data.code==200){
          this.$message.success(res.data.msg);
          this.list();
        }else {
          this.$message.error(res.data.msg);
        }
      })
    },
    openPlanAdd(){
      this.title='录入优惠卷';
      this.dialogFormVisible=true;
    },
    goPage(page){
       this.pageNum=page;
       this.list();
    },
    list(){
          this.axios.post("http://localhost:8000/carservice/carPlan/carPlanList?pageNum="+this.pageNum,this.formInline).then(res=>{
               this.tableData=res.data.data.list;
               this.total=res.data.data.total;
          })
    },
    getTypesList(){
      this.axios.post("http://localhost:8000/carservice/carType/carTypeList").then(res=>{
              this.getTypes=res.data.data;
      })

    },
    goOut(){
      window.location.href = "http://localhost:8000/carservice/carPlan/exculOut";
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.clientPlanForm.img=res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
  }, created() {
     this.list();
    this.getTypesList();
  }
}
</script>

<style scoped>

</style>